import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { viteMockServe } from 'vite-plugin-mock'

// 映入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    // 这里配置前端代理
    proxy: {
      '/dev-api': {
        // 匹配所有一 /dev-api开头的请求路径
        target: 'http://127.0.0.1:8200', // 目标服务器地址
        changeOrigin: true, // 支持跨域
        rewrite: (path) =>
          path.replace(/^\/dev-api/, '/component/management/template/api')
      },
      // ... 可以配置多个代理服务器
      '/prod-api': {
        // 匹配所有一 /dev-api开头的请求路径
        target: 'http://127.0.0.1:8200', // 目标服务器地址
        changeOrigin: true, // 支持跨域
        rewrite: (path) =>
          path.replace(/^\/prod-api/, '/component/management/template/api')
      }
    }
  },
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 使用 import.meta.url 替代 process.cwd() 来获取当前工作目录
      iconDirs: [
        path.resolve(
          fileURLToPath(new URL('./src/assets/icons', import.meta.url))
        )
      ],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    }),
    viteMockServe({
      mockPath: './mock', // mock文件存放目录
      logger: true, // 是否在控制台显示请求日志
      watchFiles: true // 监视文件更改
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  },
  //scss全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true, // 开启scss的js语法
        additionalData: `@use "@/styles/variables.scss" as *;`, // 引入全局变量
        api: 'modern-compiler', // 使用现代编译器
        silenceDeprecations: ['legacy-js-api'] // 静默弃用警告
      }
    }
  }
})
